    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>渐变</title>
        <style>
            div{
                height: 150px;
                width: 300px;
                border: 1px solid #393941;
                background-image: linear-gradient(45deg,yellow 0%,yellow 35%,red 35%,red 71%,green 71%,green 100%);
                border-top-left-radius:60px 100px ;
                border-top-right-radius:60px 30px;
                border-radius: 10px 20px 30px 40px/20px 30px 40px 50px;
            }
        </style>
    </head>
    <body>
    <div></div>
    </body>
    </html>